﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="~/Form/TextAreaPage.aspx.cs" Inherits="Mobile.Web.Form.TextAreaPage" %>
<%@ Register TagPrefix="mob" Namespace="Mobile.WebControls" Assembly="AMF" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head> 
	<title>Accordion page</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

    <mob:MobileResourcesManager ID="MobileResourcesManager1" runat="server"/>
</head> 
<body>


    <mob:MobilePage ID="mbPage1" runat="server">
        <Header>
            <h1>Accordion</h1>
        </Header>
        <Content>
            <p>
            <h2>Simple accordion:</h2>
            <mob:Accordion ID="Accordion1" runat="server">
            <Content>
                <mob:AccordionItem runat="server">
                <Content>
	                <h3>Section 1</h3>
	                <p>I'm the collapsible set content for section 1.</p>
                </Content>
                </mob:AccordionItem>
                <mob:AccordionItem runat="server">
                <Content>
	                <h3>Section 2</h3>
	                <p>I'm the collapsible set content for section 2.</p>
                </Content>
                </mob:AccordionItem>
            </Content>
            </mob:Accordion>
            </p>

            <p>
            <h2>AccordionItem with DataCollapsed</h2>
            To open a section, set DataCollapsed property to false
            <mob:Accordion ID="Accordion2" runat="server">
            <Content>
                <mob:AccordionItem DataCollapsed="false" runat="server">
                <Content>
	                <h3>Section 1</h3>
	                <p>I'm the collapsible set content for section 1.</p>
                </Content>
                </mob:AccordionItem>
                <mob:AccordionItem runat="server">
                <Content>
	                <h3>Section 2</h3>
	                <p>I'm the collapsible set content for section 2.</p>
                </Content>
                </mob:AccordionItem>
            </Content>
            </mob:Accordion>
            </p>

            <p>
            <h2>Theming collapsible content:</h2>
            You can customize header theme with the property Theme, and the content with the property ContentTheme
            <mob:Accordion ID="Accordion3" Theme="C" ContentTheme="D" runat="server">
            <Content>
                <mob:AccordionItem runat="server">
                <Content>
	                <h3>Section 1</h3>
	                <p>I'm the collapsible set content for section 1.</p>
                </Content>
                </mob:AccordionItem>
                <mob:AccordionItem runat="server">
                <Content>
	                <h3>Section 2</h3>
	                <p>I'm the collapsible set content for section 2.</p>
                </Content>
                </mob:AccordionItem>
                <mob:AccordionItem runat="server">
                <Content>
	                <h3>Section 3</h3>
	                <p>I'm the collapsible set content for section 3.</p>
                </Content>
                </mob:AccordionItem>
            </Content>
            </mob:Accordion>
            </p>

            <p>
            <h2>Theming individual sections:</h2>
            You can individual customize section using Theme and ContentTheme on AccordionItem
            <mob:Accordion ID="Accordion4" runat="server">
            <Content>
                <mob:AccordionItem Theme="B" ContentTheme="B" runat="server">
                <Content>
	                <h3>Section 1</h3>
	                <p>I'm the collapsible set content for section 1.</p>
                </Content>
                </mob:AccordionItem>
                <mob:AccordionItem Theme="A" ContentTheme="A" runat="server">
                <Content>
	                <h3>Section 2</h3>
	                <p>I'm the collapsible set content for section 2.</p>
                </Content>
                </mob:AccordionItem>
                <mob:AccordionItem Theme="E" ContentTheme="E" runat="server">
                <Content>
	                <h3>Section 3</h3>
	                <p>I'm the collapsible set content for section 3.</p>
                </Content>
                </mob:AccordionItem>
            </Content>
            </mob:Accordion>
            </p>
        </Content>
        <Footer>
            <h1>Footer</h1>
        </Footer>
    </mob:MobilePage>


</body>
</html>
